<template>
	<view class="box1">
		<Title :txt="'设备详情'" :showback="true"></Title>
		<view class="px15">
		<view class="bgcc bor5 mb10 white py15 px10">
			<view class="f14 f600">{{name}}</view>
			<view class="">
				<view class="content fcs mt12">
					<image :src="imgurl" class="minericon"></image>
					<view class="ml10 flex-1">
						<view class="fcs " v-if="coin=='BZZ'">
							<view class="f15 color-theme f600">{{storageCapacity}}节点</view>
							<view class="f12 color-gray ml5">存储容量</view>
						</view>
						<view class="fcs" v-else>
							<view class="f15 f600 color-theme">{{storageCapacity}}T</view>
							<view class="f12 color-gray ml5">存储容量</view>
						</view>
						<view class="fsb mt8">
							<view class="f12  color-gray">
								<view class="">库存:{{sumNumber-hasBuy}}</view>
								<view class="mt2">服务费:{{serviceCharge*100}}%</view>
							</view>
							<view class="fcs color-yellow">
								<view class="f15 mgr4 f600">{{price}}</view>
								<view class="f12 f600 ">USDT/台</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pro mt15">
					<view class=" fcc">
						<view class="por bgcc progressbox">
							<view class="poa hasbuy" :style="{width:((hasBuy)/(sumNumber)*100)+'%'}"></view>
						</view>
						<text class="f11 ml8 color-gray">已售{{((hasBuy)/(sumNumber)*100).toFixed(2)}}%</text>
					</view>
				</view>
			</view>
		</view>
		<view class="rulebox mt15 white">
			<view class="f16 f600 text--center">产出规则</view>
			<view>
				<view class="fac mt14 rulecont py12">
					<view class="fcfc">
						<view class="f13 f600">{{fundCoin}}</view>
						<view class="f13 mt2">奖励</view>
					</view>
					<view class="fcfc">
						<view class="f13 f600">{{shelfDay}}天</view>
						<view class="f13 mt2">上架期</view>
					</view>
					<view class="fcfc">
						<view class="f13 f600">{{packagingDay}}天</view>
						<view class="f13 mt2">封装期</view>
					</view>
					<view class="fcfc">
						<view class="f13 f600">{{miningDay}}天</view>
						<view class="f13 mt2">托管期</view>
					</view>
				</view>
				<view class="content lh30 f13 py12 px10 bgcc minerinstro" v-html="mineInstructions">
			</view>
			</view>
			<view class="content lh30 f13 mt10 " v-html="miningInstructions"></view>
			<image src="../../static/data.png" mode="" class="data mgt20"></image>
		</view>
		<view class="gobuy mt30 f16 bor5 white" @click="openinputmodel()">
			立即购买
		</view>
			<!-- 支付弹框-->
		<uni-popup :show="inputmodel" position="bottom" mode="fixed" @hidePopup="inputmodel1()"  >
			<view class="modetitle1 f17 text-c por">
				<image src="../../static/close.png" class="closeicon" @click="inputmodel = false"></image>
				<view class="f22 fwb">
					<view class="tetx--left">{{name}}</view>
				</view>
				<view class="fsc f16 mt20 f600">
					<view class="">数量</view>
					<inputnumber v-model="paynumber" :min="1"></inputnumber>
				</view>
				<view class="fsc f16 mt16 f600">
					<view class="">金额</view>
					<view class="color-yellow f20 fwb">{{totalPrice1}} USDT</view>
				</view>
				<view class="fac paybutton f16" @click="gopay">立即支付</view>
			</view>
		</uni-popup>
		<password :show="payShow" @close="payCloseFunc" @finish="submit" ref="payword"></password>
	</view>
	</view>
</template>

<script>
	import inputnumber from '../../components/inputnumber.vue';
	import password from '../../components/payPassword/pay_Password.vue';
	 import myPoup from "../../components/uni-popup/uni-popup.vue"
	   import aa from "../../components/popup/uni-popup/uni-popup.vue"  
export default {
	name: 'equiplist',
	components: {
		password,
		inputnumber,
		uniPopup:aa,
		myPoup
	},
	computed:{
		totalPrice1(){
			 var number = this.price*this.paynumber
			    number = String(number).replace(/^(.*\..{4}).*$/,"$1");
			    number = Number(number); // number = 12.3321
			return number 
		}
	},
	data() {
		return {
			status: 0,
			active: 2,
			totalPrice: 0,
			zlIndex: 0,
			df:0,
			miningEfficiency:0,
			packagingDay:0,
			storageCapacity:24,
			serviceCharge:0.01,
			name:"",
			sumNumber:1000,
			shelfDay:14,
			miningDay:0,
			coin:"",
			hasBuy:14,
			bfb:0,
			toUsdtPrice:0,
			price:0,
			miningInstructions:"",
			mineInstructions:"",
			paynumber:1,
			payShow:false,
			payid:0,
			Mark:false,
			inputmodel:false,
			payShow:false,
			id:"",
			checkmodel:false,
			payword:"",
			imgurl:"",
			fundCoin:''
		};
	},
	onLoad(options) {
		this.id=options.id
		// console.log(this.id)
	},
	onShow() {
		let params={
			id:this.id
		}
		this.$http.post("index.getMineInfo",params).then(res=>{
			this.imgurl=res.data.image
			this.df=res.data.df
			this.miningEfficiency=res.data.miningEfficiency
			this.packagingDay=res.data.packagingDay
			this.storageCapacity=res.data.storageCapacity
			this.serviceCharge=res.data.serviceCharge
			this.name=res.data.name
			this.sumNumber=res.data.sumNumber
			this.shelfDay=res.data.shelfDay
			this.miningDay=res.data.miningDay
			this.coin=res.data.coin
			this.hasBuy=res.data.hasBuy
			this.bfb=(this.hasBuy)/(this.sumNumber)
			this.toUsdtPrice=res.data.toUsdtPrice
			this.price=res.data.price
			this.miningInstructions=res.data.miningInstructions
			this.mineInstructions=res.data.mineInstructions
			this.payid=res.data.id
			if(res.data.hohoMineListCoin.length<=0){
				this.fundCoin = '暂无产出'
			}else if(res.data.hohoMineListCoin.length==1){
				this.fundCoin = res.data.hohoMineListCoin[0].coin
			}else{
				let newArr = []
				res.data.hohoMineListCoin.forEach((fitem,findex)=>{
					newArr.push(fitem.coin)
				})
				this.fundCoin = newArr.join('/')
			}
		})
	},
	methods: {
		payCloseFunc(bool) {
			this.payShow=false
		},
		submit(e) {
			let params = {
				count: this.paynumber,
				password: e,
				mineId: this.payid,
				phoneId:this.UID
			}
			this.$http.post("index.buyMine", params).then(res => {
				console.log(res)
				if (res.code == 200) {
					uni.navigateTo({
						url: "./buysuccess?price=" + this.totalPrice1
					})
				}
		
			}).catch(e => {
				this.checkmodel = false
				this.$refs.payword.close();
				uni.showToast({
					title: e.message,
					icon: 'none'
				});
			})
		},
		openinputmodel() {
			this.inputmodel=true
		},
		inputmodel1(){
			this.inputmodel=false
			this.paynumber=1
		},
		gopay() {
			this.inputmodel =false
			this.payShow = true
		}
	}
};
</script>

<style lang="less">
	.minerinstro{
		border-radius:  0 0 10rpx 10rpx;
	}
	.rulecont{
		background: linear-gradient(270deg,#4aacfa, #2474f3);
		border-radius: 10px 10px 0px 0px
	}
	.minericon {
		width: 120rpx;
		height: 130rpx;
	}
	.closeicon{
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top:30rpx;
		right: 30rpx;
	}
	/deep/ 	.uni-input-placeholder{
			text-align: right !important; 
		}
	.pay{
		width: 628rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		opacity: 1;
		background: #1372df;
		text-align: center;
		border-radius: 8rpx;
		margin-left: auto;
		margin-right: auto;
	}
	.itembox {
		width: 690rpx;
		padding: 0 0rpx 36rpx 0rpx;
		border-bottom: 2rpx solid #ccc;
		margin-left: auto;
		margin-right: auto;
		.buttonable{
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background: #1372df;
			border-radius: 6rpx;
			color: #fff;
		}
		.buttondisable {
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background: #efefef;
			border-radius: 6rpx;
			color: #6d7278;
		}
		}
	.popupcontent{
		font-size: 28rpx;
		    line-height: 44rpx;
		    overflow-y: scroll;
		    height: 600rpx;
		    text-align: left;
			padding: 0rpx 36rpx 36rpx 36rpx;
			width: 600rpx;
			display: block;
			position: relative;
	}
.maskbox {
	width: 100vw;
	padding-top: 20px;
	// height:440px;
	padding-bottom: 10px;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	text-align: initial;
	line-height: initial;
	position: relative;
	top: -370rpx;
	.add {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.mineritem {
		position: relative;
		image {
			position: absolute;
			top: 28rpx;
			right: 38rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}
	.center {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		margin-bottom: 60rpx;
	}
	.sclose {
		width: 40rpx;
		height: 40rpx;
		right: 30rpx;
		position: absolute;
	}

	.minercont {
		.minerActive {
			background: linear-gradient(134deg, #4194ee 0%, #3e76da 100%);
			color: #fff;
		}
	}
	.minerbtm {
		padding: 28rpx 0;
		.pledgecont {
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 8rpx;
			background-color: #22b573;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
		}
	}
}
.box1 {
	padding-bottom: 80rpx;
	.rulebox {
		.data {
			display: block;
			width: 678rpx;
			height: 264rpx;
			margin-left: auto;
			margin-right: auto;
		}
	}
	.productsdetail{
		padding: 30rpx 30rpx 40rpx 30rpx;
		width: 680rpx;
		background-color: #fff;
		.orangek {
			width: 8rpx;
			height: 36rpx;
			opacity: 1;
			background: #ff4f4c;
		}
		
	}
}
.gobuy {
	width: 100%;
	height: 88rpx;
	text-align: center;
	line-height: 88rpx;
	font-size: 32rpx;
	background-color: #1372df;
}
.pro {
	position: relative;
	
}
.progressbox {
		width: 230rpx;
		height: 8rpx;
		background-color: #586471;
	}
	.hasbuy{
		background-color: #FF9439;
		height: 8rpx;
		left: 0;
		top:0
	}
/deep/ p {
	font-size: 24rpx;
	// margin-left: 80rpx !important;
}
.uni-poup {
}
.modetitle {
	margin-top: 400rpx;
	background-color: #fff;
	padding: 0 30rpx;
	padding-bottom: 86rpx;
}
.modetitle1 {
	background-color: #fff;
	padding:68rpx 30rpx 40rpx;
	line-height: initial;
}
.fenge {
	width: 2rpx;
	height: 70rpx;
	opacity: 1;
	background: #ccc;
}
.paybutton {
	width: 100%;
	height: 88rpx;
	text-align: center;
	line-height: 88rpx;
	font-size: 32rpx;
	color: #ffffff;
	background-color:#2474F3;
	margin-top:70rpx;
	border-radius: 10rpx;
}
</style>
